<template>
	<div class="mineTow">
		<div class="menu-block">
			<div class="mbitem" @click="goNextPage('/index',0)">
				<img src="../../src/assets/images/shouyehui.png" alt="" v-if="isSelNav!=0" />
				<img src="../../src/assets/images/shouyeliang.png" alt="" v-if="isSelNav==0" />
				<div class="label"> {{$t('indexTitle.title273')}}</div>
			</div>
			<div class="mbitem" @click="goNextPage('/promotions',1)">
				<img src="../../src/assets/images/youhuihui.png" alt="" v-if="isSelNav!=1" />
				<img src="../../src/assets/images/youhuiliang.png" alt="" v-if="isSelNav==1" />
				<div class="label"> {{$t('indexTitle.title274')}}</div>
			</div>
			<!-- <div class="mbitem" @click="goNextPage('',2)">
				<img src="../../src/assets/images/tiyuhui.png" alt="" v-if="isSelNav!=2" />
				<img src="../../src/assets/images/tiyuliang.png" alt="" v-if="isSelNav==2" />
				<div class="label">Sports</div>
			</div> -->
			<div class="mbitem" @click="goNextPage('/affiliate',3)">
				<img src="../../src/assets/images/zhuanqianhui.png" alt="" v-if="isSelNav!=3" />
				<img src="../../src/assets/images/zhuanqianliang.png" alt="" v-if="isSelNav==3" />
				<div class="label"> {{$t('indexTitle.title304')}}</div>
			</div>
			<div class="mbitem" @click="goNextPage('/mine',4)">
				<img src="../../src/assets/images/wodehui.png" alt="" v-if="isSelNav!=4" />
				<img src="../../src/assets/images/wodeliang.png" alt="" v-if="isSelNav==4" />
				<div class="label"> {{$t('indexTitle.title276')}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getsystemconfig,
	} from "../utils/api.js";
	export default {
		props: {
			isSelNav: Number
		},
		data() {
			return {
				systemconfig: {},
				isLoadingShow: false
			}
		},
		created() {},
		mounted() {
			window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
		},
		methods: {
			goNextPage(page, num) {
				// || !localStorage.getItem('token') && num == 3
				if (!localStorage.getItem('token') && num == 4) {
					this.$router.push('/login')
					return false;
				}
				if (num == 3) {
					this.getSystemconfig();
					return false;
				}
				if (this.isSelNav != num) {
					this.$router.push(page)
				}
			},
			getSystemconfig() {
				var wyWindow = "";
				this.isLoadingShow = true
				setTimeout(() => {
					wyWindow = window.open(location.href + '?show=1', "_blank");
				}, 100);
				this.systemconfig = {};
				getsystemconfig()
					.then((res) => {
						if (res.status.errorCode == 0) {
							this.systemconfig = res.data;
							wyWindow.location = this.systemconfig.service_link;
							setTimeout(() => {
								this.isLoadingShow = false;
							}, 2000);
						} else {
							// this.$message.error(res.status.msg);
							this.$message({
								showClose: true,
								message: res.status.msg,
								type: "error",
							});
						}
					})
					.catch((err) => {
						console.log(err, "err");
					});
			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.menu-block {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #202020;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -2px 10px rgba(65, 70, 92, .2);
		gap: 6px;
		height: calc(50px + env(safe-area-inset-bottom));
		min-height: 50px;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.mbitem {
		width: 25%;
		/* width: 20%; */
		text-align: center;
		color: rgba(255, 255, 255, .5);
		font-size: 12px;
		font-weight: 300;
		text-transform: capitalize;
		white-space: nowrap;
	}

	.mbitem:first-child img {
		width: 20px;
		height: 20px;
	}

	.mbitem:nth-child(2) img {
		width: 24px;
		height: 24px;
	}

	.mbitem:nth-child(3) img {
		width: 20px;
		height: 20px;
	}

	.mbitem:nth-child(4) img {
		width: 20px;
		height: 20px;
	}

	.mbitem:nth-child(5) img {
		width: 25px;
		height: 25px;
	}
</style>